<style lang="less" scoped>
.topbox{
  padding: 130px 20px 38px;
  .row{
    display: flex;
    font-size: 20px;
    color: #666;
    text-align: center;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    div{
      flex: 1;
      height: 62px;
      line-height: 62px;
      border-right: 1px solid #333;
      border-bottom: 1px solid #333;
    }
  }
  .row2{
    font-size: 22px;
    border-top: none;
  }
  .colorf{
    color: #fff
  }
  .coloro{
    color: #FFA22A
  }
  .colorg{
    color: #34E527
  }
}
.navbox{
  height: 79px;
  padding: 0 120px;
  display: flex;
  justify-content: space-between;
  background: #242A36;
  font-size: 26px;
  align-items: center;
  .nav{
    color: #999;
    border-bottom: 4px solid rgba(0, 0, 0, 0);
    height: 79px;
    line-height: 79px;
    box-sizing: border-box;
  }
  .navactive{
    color: #fff;
    border-color: #fff;
  }
}
.sharebox{
  padding: 0 31px 10px;
  font-size: 22px;
  .title{
    color: #9E9E9E;
    padding: 29px 0 25px;
  }
  .valuebox{
    height: 62px;
    box-sizing: border-box;
    border: 2px solid #444;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 29px;
    .copy{
      font-size: 20px;
      color: #fff
    }
  }
  .codetitle{
    margin: 50px 0 31px 0;
  }
  .shareintro{
    display: flex;
    align-items: center;
    .step{
      flex: 1;
      padding: 27px 0 17px 0;
      text-align: center;
      border: 1px solid #333;
      color: #999;
      img{
        height: 54px;
      }
    }
    .next{
      width: 18px;
      margin: 0 15px 0 13px
    }
  }
}
.sharereward{
  padding: 40px 20px 10px;
}
.tabletitle{
    border: 1px solid #333;
    font-size: 20px;
    color: #666;
    height: 62px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text-align: center;
    border-bottom-width: 2px;
    div{
      flex: 1;
    }
}
.tablerow{
  border: 1px solid #333;
  border-top: none;
  color: #999;
  font-size:  22px;
  height: 62px;
  display: flex;
  align-items: center;
  text-align: center;
  div{
    flex: 1
  }
}
.teamdetail{
  padding: 30px 21px 10px;
  .datebox{
    display: flex;
    div{
      height: 49px;
      line-height: 49px;
      background: #242A36;
      opacity: 0.5;
      font-size: 20px;
      color: #999;
      padding: 0 22px;
      margin-right: 12px;
    }
    .dateactive{
      background: #242A36;
      color: #fff
    }
  }
  .searchbox{
    margin: 30px 0 27px;
    height: 62px;
    background: #121723;
    border: 2px solid #444444;
    opacity: 0.9;
    font-size: 24px;
    color: #666;
    display: flex;
    align-items: center;
    padding: 0 29px 0 20px;
    input{
      flex: 1;
      background: rgba(0, 0, 0, 0);
    }
    p{
      color: #fff
    }
  }
}
</style>

<template>
  <top-bar/>
  <div class="topbox">
    <div class="row">
      <div>成功邀请人数</div>
      <div>近30日奖励</div>
      <div>奖励比例</div>
    </div>
    <div class="row row2">
      <div class="colorf">0</div>
      <div class="coloro">0</div>
      <div class="colorg">3%</div>
    </div>
  </div>
  <div class="navbox">
    <div v-for="(nav, index) in navList" :key="index" :class="['nav', { navactive: nav.actived }]" @click="changeNav(nav)">{{nav.name}}</div>
  </div>
  <div v-show="navList[0].actived" class="sharebox">
    <p class="title">推广链接</p>
    <div class="valuebox">
      <p>123123</p>
      <p class="copy" @click="copy('123')">复制</p>
    </div>
    <p class="title">邀请码</p>
    <div class="valuebox">
      <p>88888888</p>
      <p class="copy" @click="copy('123')">复制</p>
    </div>
    <p class="title codetitle">代理说明</p>
    <div class="shareintro">
      <div class="step">
        <img src="../../assets/images/share.png" alt="">
        <p>好友分享</p>
      </div>
      <img class="next" src="../../assets/images/next.png" alt="">
      <div class="step">
        <img src="../../assets/images/shareu.png" alt="">
        <p>注册充值</p>
      </div>
      <img class="next" src="../../assets/images/next.png" alt="">
      <div class="step">
        <img src="../../assets/images/sharem.png" alt="">
        <p>获得奖励</p>
      </div>
    </div>
  </div>
  <div v-show="navList[1].actived" class="sharereward">
    <div class="tabletitle">
      <div>时间</div>
      <div>充值金额</div>
      <div>奖励</div>
      <div>奖励状态</div>
    </div>
    <div class="tablerow" v-for="(reward, index) in rewardList" :key="index">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </div>
  <div v-show="navList[2].actived" class="teamdetail">
    <div class="datebox">
      <div v-for="(date, index) in dateType" :key="index" :class="{dateactive: date.actived}" @click="changeDate(date)">{{date.name}}</div>
    </div>
    <div class="searchbox">
      <input type="text" placeholder="输入玩家ID查询">
      <p>查询</p>
    </div>
    <div class="tabletitle">
      <div>时间</div>
      <div>充值金额</div>
      <div>奖励</div>
      <div>奖励状态</div>
    </div>
    <div class="tablerow" v-for="(team, index) in teamList" :key="index">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </div>
</template>

<script>
import useClipboard from 'vue-clipboard3'
import { ref, reactive, provide } from 'vue'
import { Toast } from 'vant'
export default {
  setup(props, context) {
    provide('title', '分享')
    console.log(props, context)
    const { toClipboard } = useClipboard()
    let topData = reactive({})
    const rewardList = reactive([{}, {}])
    const teamList = reactive([{}, {}])
    const dateType = reactive([
      {
        name: '全部',
        actived: true,
        value: 0
      },
      {
        name: '今日',
        actived: false,
        value: 1
      },
      {
        name: '昨日',
        actived: false,
        value: 2
      },
      {
        name: '近7日',
        actived: false,
        value: 7
      },
      {
        name: '近30日',
        actived: false,
        value: 30
      }
    ])
    const navList = reactive([
      {
        name: '分享链接',
        actived: true
      },
      {
        name: '分享奖励',
        actived: false
      },
      {
        name: '团队详情',
        actived: false
      }
    ])
    const changeNav = (query) => {
      navList.forEach(item => item.actived = false)
      query.actived = true
    }
    
    const copy = async (text) => {
      try {
        await toClipboard(text)
        Toast.success('复制成功')
      } catch (e) {
        Toast.fail('不支持复制')
      }
    }

    const changeDate = (date) => {
      dateType.forEach(item => item.actived = false)
      date.actived = true
    }

    return {
      dateType,
      topData,
      navList,
      changeNav,
      changeDate,
      copy,
      rewardList,
      teamList
    }
  }
}
</script>